<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '待评价',
    navigationBarRightButton: {
      hide: true,
    },
  },
}
</route>
<template>
  <view
    class="w-full h-full bg-white overflow-hidden box-border"
    :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
  >
    <view class="w-full h-full bg-#F6F6F8 pos-relative z-1">
      <wd-navbar @click-left="handleClickLeft">
        <template #title>
          <text class="text-gray-333 font-size-36 font-500">待评价</text>
        </template>
        <template #left>
          <wd-icon
            name="chevron-left"
            class="text-gray-333 font-size-44"
            @click="pagesBack"
          ></wd-icon>
        </template>
      </wd-navbar>
      <view class="w-full h-full home-content">
        <view class="flex">
          <wd-tabs v-model="tab" :slidable-num="4" @change="handleTabChange">
            <block v-for="(item, index) in orderList" :key="index">
              <wd-tab :title="item.tabName">
                <view class="w-full tab-content" v-if="tab === 0">
                  <view class="w-full mg-t-20" v-for="(order, ri) in item.orderList" :key="ri">
                    <view class="w-full mg-t-20">
                      <view
                        class="flex justify-between items-center p-x-28 p-y-32 bg-white bdr-bottom-2-#F5F5F5"
                      >
                        <view class="font-400 text-gray-333 font-size-28">
                          订单号 {{ order.order_no }}
                        </view>
                        <view class="gont-400 font-size-28 text-blue-1">{{ order.status }}</view>
                      </view>
                    </view>
                    <view class="w-full p-x-28 ps-t-32 bg-white">
                      <view class="ps-b-20" v-for="(goods, gi) in order.orderGoods" :key="gi">
                        <view class="flex justify-start ps-b-20">
                          <view class="wr-160 hr-160 b-rd-8 overflow-hidden">
                            <view class="wr-160 hr-160">
                              <image width="100%" height="100%" :src="goods.pic" />
                            </view>
                          </view>
                          <view class="flex justify-between flex-col wr-510 mg-l-24">
                            <view class="flex justify-between">
                              <view>{{ goods.name }}</view>
                              <view>{{ goods.price }}</view>
                            </view>
                            <view class="flex justify-between font-size-26 text-gray-999">
                              <view>{{ goods.title }}</view>
                              <view>X {{ goods.num }}</view>
                            </view>
                          </view>
                        </view>
                        <view
                          class="w-full p-x-15 p-y-24 bdr-top-2-#F5F5F5 bdr-bottom-2-#F5F5F5 bg-white flex justify-end"
                        >
                          <view
                            class="wr-176 hr-72 mg-r-20"
                            v-for="(btn, bi) in order.btns"
                            :key="bi"
                          >
                            <wd-button
                              type="primary"
                              plain
                              size="small"
                              :disabled="goods.comment_id"
                              @click="handleBtn(btn, order, goods)"
                            >
                              <text class="font-size-28">{{ btn.name }}</text>
                            </wd-button>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="w-full tab-content" v-if="tab === 1">
                  <view
                    class="w-full mg-t-20 p-x-28 p-y-32 bg-white"
                    v-for="(order, ri) in item.orderList"
                    :key="ri"
                  >
                    <view class="w-full">
                      <view class="flex justify-between items-center">
                        <view>
                          <text class="font-size-28 text-gray-333 font-400">
                            {{ order.create_time }}
                          </text>
                        </view>
                        <!-- <view class="wr-160 hr-60 rd-30 bg-gray-1">
                          <text class="font-size-28 text-white font-400 line-h-40">匿名</text>
                        </view> -->
                      </view>
                      <view class="mg-t-36 mg-b-32">
                        <text class="font-size-28 text-gray-333 font-400">{{ order.content }}</text>
                      </view>
                      <view class="w-full flex justify-start flex-wrap">
                        <view
                          class="flex justify-center items-center item-33"
                          v-for="(img, ii) in order.pics?.split(',')"
                          :key="ii"
                        >
                          <view class="wr-216 hr-216">
                            <image width="100%" height="100%" :src="img" />
                          </view>
                        </view>
                      </view>
                      <view
                        class="w-full flex justify-start items-center mg-t-40 mg-b-20 bdr-bottom-#F5F5F5-2 bg-#F6F6F8"
                      >
                        <view class="wr-170 hr-170 b-rd-8 overflow-hidden">
                          <image width="100%" height="100%" :src="order.pic" mode="scaleToFill" />
                        </view>
                        <view
                          class="wr-460 hr-170 ps-b-15 ps-t-32 flex justify-between flex-col mg-l-24 box-border"
                        >
                          <view class="font-size-28 text-gray-333 font-500">
                            <text>{{ order.name }}</text>
                          </view>
                          <view
                            class="flex justify-between items-center font-size-28 text-gray-999 mg-b-20"
                          >
                            <view>{{ order.title }}</view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </wd-tab>
            </block>
          </wd-tabs>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getOrderList, getCommentedOrder } from '@/service/order/order'

defineOptions({
  name: 'AllOrder',
})
const { safeAreaInsets } = uni.getSystemInfoSync()
const handleClickLeft = () => {}
const pagesBack = () => {
  uni.switchTab({
    url: '/pages/home/person',
  })
}
const tab = ref(0)
const orderList: any = reactive([
  {
    tabName: '待评价',
    type: 0,
    orderList: [],
  },
  {
    tabName: '已评价',
    type: 1,
    orderList: [],
  },
])
const handleBtn = (btn: any, item: any, goods) => {
  switch (btn.value) {
    case 'comment':
      toCommentPage(item, goods)
      break
  }
}

const toCommentPage = (item: any, goods: any) => {
  uni.setStorageSync('OrderComment', JSON.stringify({ item, goods }))
  uni.navigateTo({
    url: '/pages/orders/orderComment',
  })
}
const handleTabChange = (ev: any) => {
  tab.value = ev.index
  if (ev.index === 0) {
    orderList[0].orderList = []
    getData()
  } else {
    orderList[1].orderList = []
    getRecommend()
  }
}
const getRecommend = () => {
  getCommentedOrder(1).then((res: any) => {
    const data: any = res.data.data
    for (let i = 0; i < data.length; i++) {
      const order: any = data[i]
      orderList[1].orderList.push(order)
    }
    console.log(res)
  })
}

const getData = () => {
  const param: any = {
    status: 4,
    page: 1,
  }
  getOrderList(param).then((res: any) => {
    const data: any = res.data.data
    for (let i = 0; i < data.length; i++) {
      const order: any = data[i]
      order.btns = [{ name: '评价', plain: true, value: 'comment' }]
      orderList[0].orderList.push(order)
    }
    console.log(res)
  })
}

onLoad(() => {})
onShow(() => {
  handleTabChange({ index: 0 })
})
</script>

<style scoped lang="scss">
.home-content {
  height: calc(100% - var(--wot-navbar-height, 88rpx));
  overflow: auto;
}
.tab-content {
  box-sizing: border-box;
  height: calc(100vh - 88rpx - 84rpx - 42rpx);
  overflow: auto;
  background: #f6f6f8;
}
.image-box {
  width: 33.33%;
}
.item-33 {
  width: 33.33%;
}
::v-deep .wd-button {
  width: 100% !important;
  height: 100% !important;
}
::v-deep .wd-tabs__nav-item {
  font-size: 28rpx !important;
  color: #312f2a !important;
}
::v-deep .wd-tabs {
  background-color: #f6f6f8;
}
::v-deep .wd-tabs.is-slide .wd-tabs__nav-item {
  padding: 0 30rpx;
}
</style>
